<!-- 暂时不用 -->
<template>
  <div>
    <el-dialog
      width="70%"
      :visible.sync="formShow"
      @close="handleClickDeal('cancel')"
      v-dialog-drag
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <span slot="title">
        <i class="iconfont icon-jinduguanli1"></i>
        <span>{{ title }}</span>
      </span>
      <div>
        <span class="demonstration">选择年份</span>
        <el-date-picker
          v-model="chooseYear"
          v-on:change="getWeekData()"
          type="year"
          size="small"
          placeholder="选择年份"
        >
        </el-date-picker>
        <div>
          <el-table
            class="meterage-ledger-manage-table"
            ref="table"
            row-key="id"
            :max-height="600"
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :header-cell-style="{
              textAlign: 'center',
              padding: '8px 0',
              backgroundColor: '#f2f2f2',
              borderColor: '#d4d4d4'
            }"
            @cell-click="testClick"
            :cell-style="{ padding: '10px 0', borderColor: '#d4d4d4' }"
            border
            style="width: 100%;margin-bottom:30px;margin-top:20px;"
            :data="buildUnitTable"
          >
            <el-table-column
              label="月份"
              show-overflow-tooltip
              width="200"
              prop="month"
            >
              <template slot-scope="scope">
                <div class="list-sp">
                  {{ scope.row.time }}
                  <i
                    v-if="scope.row.children != undefined"
                    class="el-icon-plus"
                    @click="addweek(scope.row)"
                  ></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="起始日期"
              show-overflow-tooltip
              align="center"
              prop="startDate"
            >
              <template slot-scope="scope">
                <div
                  v-show="(scope.row.startDate == ''||scope.row.startDate == undefined)&&!scope.row.isEdit"
                  style="width:100%; cursor: pointer;"
                  @click="showDatePicker(scope.row, 'start')"
                >
                  &nbsp;
                </div>
                <div
                  v-if="!scope.row.isEdit"
                  @click="showDatePicker(scope.row, 'start')"
                >
                  {{ scope.row.startDate }}
                </div>
                <el-date-picker
                  v-else
                  v-model="scope.row.startDate"
                  type="date"
                  size="small"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                  @blur="blurEvent(scope.row, 'start')"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="结束日期"
              show-overflow-tooltip
              align="center"
              prop="endDate"
            >
              <template slot-scope="scope">
                <div
                  v-if="(scope.row.endDate == ''||scope.row.endDate == undefined)&&!scope.row.isEdit"
                  style="width:100%;"
                  @click="showDatePicker(scope.row, 'end')"
                >
                  &nbsp;
                </div>
                <div
                  v-if="!scope.row.isEdit2"
                  @click="showDatePicker(scope.row, 'end')"
                >
                  {{ scope.row.endDate }}
                </div>
                <el-date-picker
                  v-else
                  v-model="scope.row.endDate"
                  type="date"
                  size="small"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                  @blur="blurEvent(scope.row, 'end')"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          :loading="isLoading"
          @click="handleClickDeal('submit', { flag: 1 })"
          ><i class="iconfont icon-icon_save"></i> 确 定
        </el-button>
        <el-button size="small" @click="handleClickDeal('cancel')"
          ><i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'weekly-weekNumDetail-detail',
  data() {
    return {
        formBaseData: {
            buildUnitTable: [],
            year: '',
            projectId: '',
        },
      isLoading: false,
      title: '周数维护',
      formShow: false, // 表单展示
      chooseYear: '',
        projectId:'',
      buildUnitTable: [
        {
          id: '1',
          time: '1月',
          startDate: '',
          endDate: '',
          children: [
            // {
            //   id: '1-1',
            //   month: '第1周',
            //   isEdit: false,
            //   isEdit2: false,
            //   startDate: '2021-09-10',
            //   endDate: '2021-09-10'
            // },
            // {
            //   id: '1-2',
            //   isEdit: false,
            //   isEdit2: false,
            //   month: '第2周',
            //   startDate: '2021-09-10',
            //   endDate: '2021-09-10'
            // }
          ]
        },
        {
          id: '2',
            time: '2月',
          startDate: '',
          endDate: '',
          children: [
            // {
            //   id: '2-1',
            //   month: '第1周',
            //   isEdit: false,
            //   isEdit2: false,
            //   startDate: '2021-09-10',
            //   endDate: '2021-09-10'
            // },
            // {
            //   id: '2-2',
            //   month: '第2周',
            //   isEdit: false,
            //   isEdit2: false,
            //   startDate: '2021-09-10',
            //   endDate: '2021-09-10'
            // }


          ]
        },
          {
              id: '3',
              time: '3月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '4',
              time: '4月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '5',
              time: '5月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '6',
              time: '6月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '7',
              time: '7月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '8',
              time: '8月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '9',
              time: '9月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '10',
              time: '10月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '11',
              time: '11月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },
          {
              id: '12',
              time: '12月',
              startDate: '',
              endDate: '',
              children: [
              ]
          },





      ]
    }
  },
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  watch: {
    postDetail(value) {
      console.log(value)
      // 显示详情弹窗
      this.formShow = value.show
      this.projectId = value.params === undefined ? 0 : value.params.projectId
      this.formBaseData.projectId=  this.projectId
      this.chooseYear = new Date()
      this.getWeekData()
    }
  },
  methods: {

      getWeekData(){
          var year = this.chooseYear.getFullYear();
          this.formBaseData.year=year
          this.$httpPost('buss/weekData/getListByProjectAndYear',
                          {
                              year: year,
                              projectId:this.projectId
                          }
                      )
                          .then(res => {
                              if (res.status === 1) {
                                  // this.selectList.adviceList = []
                                  this.buildUnitTable=[]
                                  res.list.forEach(item => {
                                    if(item.children.length > 0){
                                      for (let i = 0; i < item.children.length; i++) {
                                        const child = item.children[i];
                                        if(child.endDate != '' && child.endDate != undefined){
                                          child.endDate = child.endDate.slice(0,10)
                                          child.startDate = child.startDate.slice(0,10)
                                        }
                                      }
                                    }

                                      this.$set(
                                          this.buildUnitTable,
                                          this.buildUnitTable.length,
                                          item
                                      )
                                  })
                              } else {
                                  this.$messageError(res.message)
                              }
                          })
                          .catch(res => {
                              this.$messageError('获取周数据失败!')
                          })




      } ,

    showDatePicker(row, type) {
      if (row.children == undefined) {
        // console.log('子元素')
        if (type == 'start') {
          this.$set(row, 'isEdit', true)
        } else {
          this.$set(row, 'isEdit2', true)
        }
      }
    },
    blurEvent(row, type) {
      if (type == 'start') {
        this.$set(row, 'isEdit', false)
      } else {
        this.$set(row, 'isEdit2', false)
      }
    },
    testClick(row, column, cell, event) {
      console.log(row)
      //   console.log(column)
      //   console.log(cell)
    },
    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          case 'cancel':
              // 重置表单验证
              // this.$refs['formBaseData'].resetFields()
              this.buildUnitTable=[]
              this.formBaseData= {


              }
              // 关闭弹窗
              this.formShow = false
              break

          break
        // 保存
        case 'submit':
          let flag = res.flag
          /// 表单验证
          //   this.$refs['formBaseData'].validate(valid => {

                if (true) {
                    this.isLoading = true
                    // 提交详情
                    this.submitDetail('flag', () => {
                        this.formShow = false
                        this.isLoading = false
                        // 传值给父组件刷新列表
                        // this.$emit('reloadList')
                        this.$bus.$emit('Ajax')
                    })
                } else {
                    this.isLoading = false
                }
            // })
            break
      }
    },


      submitDetail(type, callback) {
          let submit = 'buss/weekData/submit'
          // if (this.detailType === 'build') {
          //     submit = '/japi/weekData/submit'
          // } else {
          //     submit = '/japi/weekData/resubmit'
          // }

          this.formBaseData.buildUnitTable=this.buildUnitTable
          this.$httpPost( submit, this.formBaseData)
              .then(res => {
                  if (res.status === 1) {
                      this.$messageSuccess('保存成功')
                      this.$emit('reloadList')
                      this.detailId = res.data.id
                      this.isLoading = false
                      if (callback) callback()
                  } else {
                      this.isLoading = false
                      this.$messageError(res.message)
                  }
              })
              .catch(res => {
                  console.log('请求出现错误',res);
                  this.isLoading = false
                  console.log(res, '2')
                  this.$messageError(this.$route.name + '提交详情-请求失败')
              })
              .finally(() => {
                  this.isLoading = false
              })

      },



    addweek(row) {
      // let index = row.$index
      let index = row.children.length + 1
        let  year=this.chooseYear.getFullYear();
      console.log(index)
      let obj = {
        // id: row.id + '-' + index,
          id: '',
        time: `第${index}周`,
          week:index,
        startDate: '',
        endDate: '',
          year:year,
      }
      row.children.push(obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.meterage-ledger-manage-table {
  .list-sp {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.meterage-ledger-manage-table {
  tbody > tr > td:nth-of-type(1) {
    .cell.el-tooltip {
      // text-align: left !important;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      // color: firebrick !important;
    }
  }
}
</style>
